<template>
    <div :style="carStyle">
        <div style="text-align: center;">
            <div v-if="valueIsNullOrEmpty">无数据</div>
            <div :class="obj.tableData.isBreakLine ? '' : 'flex'" @click="gotoUrl(obj)">
                <div class="card-title" :style="titleStyle">{{ obj.title }}</div>
                <div>
                    <span v-if="obj.tableData.isShowValue" :style="numberStyle">{{ valFormat(value) }}</span>
                    <span :style="unitStyle"> {{ obj.tableData.unit }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
// import { oneLoad, boardOneLoad } from '@/api/share'

export default {
    Name: "Card",
    props: {
        obj: Object,
        isReload: {
            type: Boolean,
            default: false
        },
        isEdit: {
            type: Boolean,
            default: false,
        },
        gotoUrl: Function,
        getTableValue: Function,
    },
    data() {
        return {
            value: 0,
            titleStyle: {},
            carStyle: {},
            numberStyle: {},
            unitStyle: {},
            timer: null,
            filterForm: {},
            valueIsNullOrEmpty: false,
        }
    },
    mounted() {
        this.setStyle();
        this.$nextTick(function () {
            this.reloadInfo();
        })

        this.dataStr = JSON.stringify(this.obj.tableData);
    },
    methods: {
        reloadInfo() {
            var timeSize = 60;
            if (this.obj.tableData.reloadTime) {
                timeSize = this.obj.tableData.reloadTime;
            }

            if (this.obj.tableData.type == 1) {
                // 刷新时间兼容处理
                if (timeSize < 60) {
                    timeSize = 60;
                }
            }

            clearInterval(this.timer);
            this.getFirstData();

            if (this.isReload) {
                this.timer = setInterval(() => {
                    this.getLineData();
                }, timeSize * 1000);
            }
        },
        valFormat(value) {
            // 判断是否是数值
            if (!isNaN(Number(value))) {
                if (value != null && this.obj.tableData.decimal >= 0) {
                    return Number(value).toFixed(this.obj.tableData.decimal);
                }
            }
            return value;
        },
        setStyle() {
            var style = this.obj.style;

            var backgroundColor = "";
            var backgroundImage = "";

            // 背景颜色
            if (style.backgroundImage.length) {
                backgroundImage = `url(${style.backgroundImage}`;
            } else if (style.backgroundColor.length > 0) {
                backgroundColor = style.backgroundColor;
            } else {
                backgroundColor = "";
            }

            var boxShadow = "";
            if (style.boxShadow) {
                boxShadow = `${style.boxShadow.h}px ${style.boxShadow.v}px ${style.boxShadow.blur}px ${style.boxShadow.spreed}px ${style.boxShadow.color}`
            }

            this.carStyle = {
                boxShadow,
                width: "100%",
                height: "100%",
                display: "flex",
                backgroundSize: "100% 100%",
                borderStyle: "solid",
                backgroundImage,
                backgroundColor,
                justifyContent: style.justifyContent,
                alignItems: style.alignItems,
                borderColor: style.borderColor,
                borderWidth: style.borderWidth + "px",
                borderRadius: style.borderRadius + "px",
            }

            // #region 新的背景颜色

            if (this.obj.style.bgcolorType == "image") {
                this.carStyle.backgroundImage = backgroundImage;
            } else if (this.obj.style.bgcolorType == "gradient") {
                if (this.obj.style.gradient.isRadial) {
                    this.carStyle.backgroundImage = `radial-gradient(${this.obj.style.gradient.colorStart}, ${this.obj.style.gradient.colorEnd})`;
                } else {
                    this.carStyle.backgroundImage = `linear-gradient(${this.obj.style.gradient.fontAngle}deg, ${this.obj.style.gradient.colorStart}, ${this.obj.style.gradient.colorEnd})`;
                }
            } else {
                this.carStyle.backgroundColor = backgroundColor;
            }

            // #endregion

            this.titleStyle = {
                fontSize: style.fontSize + "px",
                color: style.color,
                fontWeight: style.fontWeight,
                fontStyle: style.fontStyle,
            };

            var data = this.obj.tableData;
            this.numberStyle = {
                color: this.obj.tableData.valColor,
                fontSize: this.obj.tableData.valSize + "px",
                fontStyle: data.valFontStyle,
                fontWeight: data.valFontWeight,
            }

            this.unitStyle = {
                color: this.obj.tableData.textColor,
                fontSize: this.obj.tableData.textSize + "px",
                fontWeight: data.textFontWeight,
                fontStyle: data.textFontStyle,
            }
        },
        getFirstData() {
            if (this.obj.tableData.tableId && this.obj.tableData.lineId) {
                var result = this.getTableValue(this.obj.tableData.tableId, this.obj.tableData.lineId, 1);
                if (result.code == 200) {
                    this.getLineData();
                } else {
                    var self = this;
                    window.setTimeout(function () {
                        self.getFirstData();
                    }, 1000);
                }
            }
        },
        getLineData() {
            var result = this.getTableValue(this.obj.tableData.tableId, this.obj.tableData.lineId, 1);
            if (result.code == 200) {
                this.valueIsNullOrEmpty = false;
                this.value = result.data;

                if (this.value == "" || this.value == null) {
                    this.valueIsNullOrEmpty = true;
                }
            }
            return false;

            if (this.obj.tableData.tableId && this.obj.tableData.lineId) {
                this.filterForm.tableId = this.obj.tableData.tableId;
                this.filterForm.structureId = this.obj.tableData.lineId;

                if (this.obj.tableData.type != 1) {
                    oneLoad(this.filterForm).then((res) => {
                        this.valueIsNullOrEmpty = false;

                        if (res.data.code == 0) {
                            this.value = res.data.data;

                            if (this.value == "" || this.value == null) {
                                this.valueIsNullOrEmpty = true;
                            }
                        } else {
                            console.error(res.data.message)
                        }
                    }).catch(() => {
                        clearInterval(this.timer)
                    });
                } else {
                    boardOneLoad(this.filterForm).then((res) => {
                        this.valueIsNullOrEmpty = false;

                        if (res.data.code == 0) {
                            this.value = res.data.data;

                            if (this.value == "" || this.value == null) {
                                this.valueIsNullOrEmpty = true;
                            }
                        } else {
                            console.error(res.data.message)
                        }
                    }).catch(() => {
                        clearInterval(this.timer)
                    });
                }
            }
        }
    },
    watch: {
        obj: {
            deep: true,  // 深度监听
            handler(newVal, oldVal) {
                this.setStyle();

                if (JSON.stringify(this.obj.tableData) != this.dataStr) {
                    this.dataStr = JSON.stringify(this.obj.tableData);

                    if (this.obj.tableData.tableId) {
                        this.reloadInfo();
                    }
                }
            }
        }
    },
    beforeDestroy() {
        clearInterval(this.timer)
    }
}
</script>